<template>
  <view class="container">
    <view class="dataList" v-if="resumeDataList.length">
      <view class="row" v-for="(item, index) in resumeDataList" :key="index">
        <!-- 左边模块 -->
        <view class="left">
          <u-image
            :show-loading="true"
            :src="item?.headPath"
            width="80rpx"
            height="80rpx"
            radius="100%"
          ></u-image>
        </view>
        <!-- 右边模块 -->
        <view class="right">
          <view class="name">
            <text>{{ item.username }}</text>
            <u-image
              :show-loading="true"
              mode="aspectFit"
              :src="
                item.gender == 1
                  ? 'https://pic.imgdb.cn/item/6588005ec458853aeffb6922.png'
                  : 'https://pic.imgdb.cn/item/6588005ec458853aeffb69ca.png'
              "
              width="30rpx"
              height="30rpx"
            ></u-image>
          </view>
          <view class="college">{{ item.institute }} · {{ item.grade }}</view>
          <view class="tag">
            <view
              class="tag-row"
              v-for="(item2, index2) in item.domain"
              :key="index2"
            >
              {{ item2 }}
            </view>
          </view>
          <view class="interest">
            <view class="btn" @click="handleInterest(item.id)">感兴趣</view>
          </view>
        </view>
      </view>
    </view>
    <u-empty
      v-else
      mode="car"
      icon="http://cdn.uviewui.com/uview/empty/car.png"
      text="暂无观看历史"
      marginTop="100"
    >
    </u-empty>
  </view>
</template>

<script setup>
import { getItem } from "@/utils/localStorage";
import { watchHistory } from "@/api/user";
import env from "@/utils/env";

const resumeDataList = ref([]);

onMounted(async () => {
  app();
});
const app = async () => {
  const result = await watchHistory(getItem("userInfo").id);
  console.log("结果：", result);
  resumeDataList.value = result.data.data.users;
  console.log("result.data.data.user：", result.data.data.users);

  // 格式化路径
  resumeDataList.value.map((item) => {
    item.headPath = `${env.baseUrl}/head/${item.headPath}`;
  });
};

// 感兴趣
const handleInterest = (thisId) => {
  uni.navigateTo({
    url: `/pagesA/resume/index?thisId=${thisId}`,
  });
};
</script>
<script>
export default {
  name: "",
};
</script>

<style lang="scss" scoped>
.container {
  width: 750rpx;
  padding: 0 30rpx;

  // background-image: linear-gradient(
  //   to bottom,
  //   rgba(204, 222, 253, 0.93),
  //   #f2f7ff,
  //   #f2f7ff,
  //   #f2f7ff,
  //   #ffffff
  // );
  background-color: #f4f5f9;
  min-height: 100vh;

  // padding-bottom: 150rpx;
  padding-top: 20rpx;

  .dataList {
    border-radius: 20rpx;
    margin-top: 20rpx;

    .row {
      background-color: #fff;
      // box-shadow: 0 0 30rpx #ececec;
      margin-bottom: 20rpx;
      padding: 30rpx 40rpx;
      display: flex;
      border-radius: 16rpx;
      padding-bottom: 0;

      .left {
        margin-right: 25rpx;
      }

      .right {
        flex: 1;

        view {
          margin-bottom: 10rpx;
        }

        .name {
          font-size: 34rpx;
          font-weight: 800;

          display: flex;
          align-items: center;

          text {
            margin-right: 10rpx;
          }
        }

        .college {
          color: #6d6c72;
          font-size: 24rpx;
        }

        .tag {
          display: flex;
          flex-wrap: wrap;

          .tag-row {
            padding: 5rpx 14rpx;
            background-color: #f5f6fa;
            margin-right: 16rpx;
            color: #9e9da0;
            font-size: 22rpx;
            border-radius: 10rpx;
            margin-bottom: 5rpx;
          }
        }

        .interest {
          display: flex;
          align-items: center;
          justify-content: flex-end;

          .btn {
            padding: 15rpx 40rpx;
            background-color: #0053fb;
            color: #fff;
            border-radius: 40rpx;
            font-size: 24rpx;
          }
        }
      }
    }
  }
}
</style>
